<template>
    <div class="index-pag" v-if="indexData !=null"> 
        <!--  v-if="indexData !=null" -->
        <!-- 标题 -->
        <van-nav-bar title="首页"  placeholder fixed />
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1baeae">
            <van-swipe-item v-for="(item,index) in indexData.swiperList" :key="index">
                <img :src="item.imgurl">
            </van-swipe-item>
        </van-swipe>
        <!-- 金刚区 -->
        <van-grid :column-num="5" square>
            <van-grid-item v-for="(item,index) in indexData.navList" :key="index"  :url="item.href">
                <van-image :src="item.imgUrl"  class="bord-img"/>
                <span style="font-size: 14px;">{{ item.name }}</span>
            </van-grid-item>
        </van-grid>
        <!-- 商品类别名称 -->
        <div class="shop-type-name">新品上线</div>
        <!-- 商品列表 -->
         <div class="shop-box">
            <div class="shop-item" v-for="(item,index) in indexData.newGoodses" :key="index" @click="goshop(item)">
                <img :src="item.goodsCoverImg" alt="">
                <p>{{ item.goodsName}}</p>
                <span>￥{{item.sellingPrice}}</span>
            </div>  
         </div>
         <!-- 商品类别名称 -->
        <div class="shop-type-name" >热门商品</div>
        <!-- 商品列表 -->
         <div class="shop-box" >
            <div class="shop-item" v-for="(item,index) in indexData.hotGoodses" :key="index"  @click="goshop(item)">
              <img :src="item.goodsCoverImg" alt="">
              <p>{{ item.goodsName}}</p>
              <span>￥{{item.sellingPrice}}</span>
            </div>  
         </div>
         <div class="shop-type-name">最新推荐</div>
        <!-- 商品列表 -->
         <div class="shop-box">
            <div class="shop-item" v-for="(item,index) in indexData.recommendGoodses" :key="index" @click="goshop(item)">
                <img :src="item.goodsCoverImg" alt="">
                <p>{{ item.goodsName}}</p>
                <span>￥{{item.sellingPrice}}</span>
            </div>  
         </div>
        <!-- 底部导航 -->
        <van-tabbar v-model="active" placeholder="" route>
            <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
            <van-tabbar-item icon="apps-o" to="/sort">分类</van-tabbar-item>
            <van-tabbar-item :badge="shopCarData.length" to="/shopcar" icon="shopping-cart-o" >购物车</van-tabbar-item>
            <van-tabbar-item icon="contact-o" to="/myui">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>

export default {
    data() {
        return {
            //首页数据
            indexData:null,
            active: 'home',
            value:[],
            shopCarData: localStorage.getItem("shopCarData") ? JSON.parse(localStorage.getItem("shopCarData")) : [],
        };
    },
    created(){
        //axios:封装的一个网络请求库，用来跟服务器端进行数据交互
        //使用步骤：
        //安装 npm i axios
        //使用
        //在main.js中将axios挂载到Vue全局对象上
        //在发起一个get请求：this.$axios.get("请求地址"，请求参数)
        //常用请求方式：
        //get:常用作获取数据
        //post：常用作提交数据
        //http://localhost:8888/data 首页数据接口地址
        //http://localhost:8888/cetegory 分类数据接口地址
        this.$axios.get("http://localhost:8888/data").then(res=>{
            //.then() 请求成功的回调函数
            //res 请求到的数据
           console.log(res,'首页数据')
           //数据赋值
           this.indexData=res.data
        }).catch(err=>{
             //.catch()请求失败的回调函数
            //err 失败的提示信息
            console.log(err)
        })
    },
    methods:{
        goshop(i){
            this.$router.push({name:'shopitem',params:i})
        }
    }
}

</script>

<style scoped lang="less">
//使用less作为css预处理器
.my-swipe{
    width: 100%;
    height: 168px;
}
.bord-img{
    width: 40px;
    height: 40px;

}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 0px;
    text-align: center;
    background-color: #39a9ed;
}
.my-swipe .van-swipe-item img{
    width:100%;
    height: 200px;
}
.shop-type-name{
    margin: 0 auto;
    color: #1baeae;
    background: #f9f9f9;
    width: 100%;
    height: 50px;
    font-size: 14px;
    text-align: center;
    line-height: 50px;
}
.shop-box{
    display: flex;
    flex-wrap: wrap;
    .shop-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16px;
        box-sizing: border-box;
        width: 50%;
    }
    img{
        height: 100px;
        width: 100px;
    }
    p{
        margin: 5px 0;
        text-align: center;
        font-size: 14px;
    }
    span{
        font-size: 14px;
        color: #1baeae;
    }
    //& 代表父级
    & .shop-item:nth-child(2n-1){
        border-right: 1px solid #e9e9e9;
        border-bottom: 1px solid #e9e9e9;
    }
    & .shop-item:nth-child(2n){
        border-bottom: 1px solid #e9e9e9;
    }
}
</style>